<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div ng-app="switchableGrid" ng-controller="SwitchableGridController">
        <div class="bar">

            <!-- These two buttons switch the layout variable,
			 which causes the correct UL to be shown. -->
            <a class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>
            <a class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>
        </div>

        <!-- We have two layouts. We choose which one to show depending on the "layout" binding -->

        <ul ng-show="layout == 'grid'" class="grid">
            <!-- A view with big photos and no text -->
            <li ng-repeat="p in pics">
                <a href="{{p.link}}" target="_blank">
                    <img ng-src="{{p.images.low_resolution.url}}" />
                </a>
            </li>
        </ul>

        <ul ng-show="layout == 'list'" class="list">
            <!-- A compact view smaller photos and titles -->
            <li ng-repeat="p in pics">
                <a href="{{p.link}}" target="_blank">
                    <img ng-src="{{p.images.thumbnail.url}}" />
                </a>
                <p>{{p.caption.text}}</p>
            </li>
        </ul>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script>
    // Define a new module. This time we declare a dependency on
    // the ngResource module, so we can work with the Instagram API

    var app = angular.module("switchableGrid", ['ngResource']);

    // Create and register the new "instagram" service
    app.factory('instagram', function($resource) {
        return {
            fetchPopular: function(callback) {

                // The ngResource module gives us the $resource service. It makes working with
                // AJAX easy. Here I am using the client_id of a test app. Replace it with yours.

                var api = $resource('https://api.instagram.com/v1/media/popular?client_id=:client_id&callback=JSON_CALLBACK', {
                    client_id: '642176ece1e7445e99244cec26f4de1f'
                }, {
                    // This creates an action which we've chosen to name "fetch". It issues
                    // an JSONP request to the URL of the resource. JSONP requires that the
                    // callback=JSON_CALLBACK part is added to the URL.
                    fetch: {
                        method: 'JSONP'
                    }
                });
                api.fetch(function(response) {
                    // Call the supplied callback function
                    callback(response.data);

                });
            }
        }

    });
    app.controller('SwitchableGridController', function($scope, instagram) {
        // Default layout of the app. Clicking the buttons in the toolbar
        // changes this value.
        $scope.layout = 'grid';
        $scope.pics = [];
        // Use the instagram service and fetch a list of the popular pics
        instagram.fetchPopular(function(data) {

            // Assigning the pics array will cause the view
            // to be automatically redrawn by Angular.
            $scope.pics = data;
        });

    });
</script>

</html>
